<template>
	<u-popup :show="show" mode="bottom" round="20rpx">
		<view class="bg-white discount-box">
			<view class="u-padding-20 u-flex u-flex-center u-rela">
				<text>{{$t('order.优惠详情')}}</text>
				<image class="close-btn img-36 u-abso" :src="$staticPath('classify/close.png')" @tap="handleClose"></image>
			</view>
			<view class="u-flex u-flex-between u-padding-20 u-m-b-20">
				<text class="u-font-32 c-333 fw-500">{{$t('order.抵扣优惠')}}</text>
				<view class="u-flex u-font-28 c-red">
					<template v-if="discountMoney">
						<text class="u-m-r-10">{{$t('classify.减')}}</text>
						<text>{{$unitEn}}</text>
						<text class="u-m-r-10">{{discountMoney}}</text>
					</template>
					<image v-if="isOpen === 1" class="img-36" :src="$staticPath('classify/selected-radio.png')" mode=""></image>
					<image v-else class="img-36" :src="$staticPath('classify/radio.png')" mode="" @tap="handleOpen(1)"></image>
				</view>
			</view>
			<template v-if="isOpen">
				<view class="u-m-b-20 u-padding-30">
					<image class="img-100" :src="$fullLink(selectedCommodityUrl)" v-if="selectedCommodityUrl"></image>
				</view>
				<view class="u-flex u-flex-between u-padding-20" v-for="item in deductionStrategy" :key="item.id">
					<template >
						
						<view class="u-flex">
							<image class="img-80" :src="$fullLink(item.icon)" mode=""></image>
							<text class="u-font-28 c-333 u-m-l-20">{{item.name}}</text>
						</view>
						<view v-if="!item.check && !item.deductMoney"  class="u-flex text-right u-font-28 c-secondary">
							<text  class="u-m-r-10">{{$t('order.账户余额不足')}}</text>
							<image v-if="deductionType === 'N'"  class="img-36 u-m-l-20" :src="$staticPath('classify/radio.png')"></image>
							<image v-else class="img-36 u-m-l-20" :src="$staticPath('classify/checkbox.png')"></image>
						</view>
						<view class="u-flex text-right u-font-28 c-secondary" v-else>
							<template v-if="$isEnglishVersion">
								Deduct {{item.floatingMoney}} for {{$unitEn}}{{item.deductMoney}}
							</template>
							<template v-else>
								<text class="u-m-r-10">{{$t('classify.抵扣')}} {{item.floatingMoney}}</text>
								<text>{{$unitEn}}{{item.deductMoney}}</text>
							</template>
							<image v-if="deductionType === 'N'" class="img-36 u-m-l-20" :src="$staticPath(item.check ? 'classify/selected-radio.png' :'classify/radio.png'  )" @tap="handleSelct(item)"></image>
							<image v-else class="img-36 u-m-l-20" :src="$staticPath(item.check ? 'classify/checkbox-select.png' :'classify/checkbox.png'  )" @tap="handleSelct(item)"></image>
						</view>
					</template>
				</view>
			</template>
			<view class="u-flex u-flex-between u-padding-20">
				<text class="u-font-32 c-333 fw-500">{{$t('order.不使用')}}</text>
				<image v-if="isOpen === 0" class="img-36" :src="$staticPath('classify/selected-radio.png')" mode=""></image>
				<image v-else class="img-36" :src="$staticPath('classify/radio.png')" mode="" @tap="handleOpen(0)"></image>
			</view>
			<view class="btn-box u-flex u-flex-center" @tap="handleSubmit">
				<text class="fw-500 u-font-28 c-white">{{$t('common.确定')}}</text>
			</view>
		</view>
	</u-popup>
</template>

<script>
	import {
		numToFixed
	} from '@/common/utils'
	export default {
		props: {
			show:Boolean,
			deductionType:String,
			selectedCommodityUrl:String,
			deputyMoneyDeduction:Number,
			deductionStrategy:{
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				isOpen: 1,
				discountMoney:0
			}
		},
		watch: {
			deputyMoneyDeduction(val) {
				this.isOpen = val ? 1 : 0
			},
			show(val) {
				if (val) {
					this.isOpen = this.deputyMoneyDeduction ? 1 : 0
				}
			},
			deductionStrategy: {
				handler(val) {
					this.discountMoney = 0
					this.handleGetDiscountMoney()
				},
				immediate: true
			}
		},

		methods:{
			handleOpen(type) {
				this.isOpen = type
			},
			handleGetDiscountMoney() {
				this.discountMoney = 0
				if (this.deductionType === 'N') {
					this.deductionStrategy?.some(item => {
						if (item.check) {
							this.discountMoney = item.deductMoney
							return item.check
						}
					})
				} else {
					this.deductionStrategy?.forEach(item => {
						if (item.check) this.discountMoney = numToFixed(this.$accAdd(this.discountMoney, +item.deductMoney), 2)
					})
				}
			},
			handleClose() {
				this.$emit('close')
			},
			handleSelct(item) {
				if (this.deductionType === 'N') {
					this.deductionStrategy.forEach(strategy => {
						if (strategy.strategy === item.strategy) {
							strategy.check = true
						} else {
							strategy.check = false
						}
					})
				} else {
					item.check = !item.check
					this.deductionStrategy.some(strategy => {
						if (strategy.strategy === item.strategy) {
							strategy.check = item.check
							return true
						}
					})
				}
				this.handleGetDiscountMoney()
			},
			handleSubmit() {
				this.$emit('submit', this.deductionStrategy, this.isOpen)
			}
		}
	}
</script>

<style lang="scss">
	.discount-box {
		border-radius: 20rpx 20rpx 0 0;
		.close-btn {
			top: 20rpx;
			right: 30rpx;
		}
		.btn-box {
			height: 80rpx;
			background: #F5222D;
			border-radius: 40rpx;
			margin: 30rpx;
		}
	}
	.img-100 {
		width:200rpx;
		height: 200rpx;
	}
	
</style>
